<template>
    <div>
      <div class="ev-info-div">
        <el-card class="ev-info">
          <div class="ev-title">
            综合<br>
            评分
          </div>
          <div class="ev-score">
            {{course.overallRate}}
          </div>
          <div class="star-box">
            <el-rate
              :value="course.overallRate / 2"
              class="rateDiv"
              :max="5"
              disabled
              text-color="#ff9900"
              :score-template="(course.overallRate / 2).toString()">
            </el-rate>
          </div>
          <div class="right-rate">
            <ul>
              <li>内容实用<span>{{course.rate1}}</span></li>
              <li>简洁易懂<span>{{course.rate2}}</span></li>
              <li>逻辑清晰<span>{{course.rate3}}</span></li>
            </ul>
          </div>
        </el-card>
      </div>
      <div v-if="isStudy && !isEv">
        <el-card class="message-card" v-if="studyPre<30">
          <div style="height: 30px;line-height: 30px;display: inline-block">
            <i class="el-icon-warning">
              您学习本课进度不足30%，不能对课程进行评价
            </i>
          </div>
        </el-card>
        <el-card v-else>
          <div class="ev-submit">
            <div class="ev-title" >
              <span>发表评价</span>
              <div class="submit-btn">
                <el-button size="small" type="success" @click="addEvaluation">发表</el-button>
              </div>
            </div>
            <el-divider></el-divider>
            <div>
              <div style="text-align: left">
                <div class="rate-div-all">内容实用：<el-rate v-model="evalData.rate1" class="rate-div"></el-rate></div>
                <div class="rate-div-all">简洁易懂：<el-rate v-model="evalData.rate2" class="rate-div"></el-rate></div>
                <div class="rate-div-all">逻辑清晰：<el-rate v-model="evalData.rate3" class="rate-div"></el-rate></div>
              </div>
              <div style="text-align: left;height: 200px;margin-top: 20px">
                <el-form label-position="top" style="height: 100%">
                  <el-form-item label="评价内容">
                    <el-input type="textarea"
                              :rows="6"
                              v-model="evalData.content"
                              maxlength="300"
                              show-word-limit
                              class="inputDiv"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div>
        <el-card class="card ev" v-for="item in evals" :key="item.evaluationId">
          <div class="left-image">
            <el-avatar :src="item.imageUrl"></el-avatar>
          </div>
          <div class="right-content">
            <div class="name">
              <div class="name-show">
                <a>{{item.nickname}}</a>
              </div>
              <div class="rate-show">
                <el-rate
                  :value="parseFloat(item.rate / 2)"
                  :max="5"
                  disabled
                  text-color="#ff9900"
                  :score-template="(item.rate / 2).toString()"
                  >
                </el-rate>
              </div>
            </div>
            <div class="content-div">
              <div v-html="item.content" ></div>
            </div>
            <div class="bottom-option">
              <div class="creatTime">{{item.createTime}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script>
// 课程评分
import {mapState} from 'vuex'

export default {
  name: 'CourseEv',
  props: ['courseId', 'isStudy'],
  data () {
    return {
      studyPre: '',
      isEv: true,
      course: {},
      evals: [],
      evData: {
        overallRate: 9.70 / 2,
        rate1: 9.5,
        rate2: 9.2,
        rate3: 8.6
      },
      evalData: {
        courseId: this.courseId,
        userId: '',
        rate1: 0,
        rate2: 0,
        rate3: 0,
        content: ''
      }
    }
  },
  mounted () {
    this.getCourse()
    this.getStudyDetail()
    this.getSelfEv()
    this.getEvaluations()
  },
  computed: mapState({
    user: 'user'
  }),
  methods: {
    getCourse () {
      var _this = this
      this.$axios.post('/api/course/getCourseById',
        this.$qs.stringify({
          courseId: this.courseId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.course = data.result
        }
      })
    },
    getStudyDetail () {
      var _this = this
      this.$axios.post('/api/study/getStudyDetail',
        this.$qs.stringify({
          'queryData': JSON.stringify({
            'courseId': _this.courseId,
            'userId': _this.user.userId
          })
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            if (JSON.parse(JSON.stringify(data.result)) != null) {
              var studyData = data.result
              _this.studyPre = parseInt(studyData.scount / studyData.total * 100)
            }
          }
        })
    },
    getSelfEv () {
      var _this = this
      this.$axios.post('/api/evaluation/getEvaluation',
        this.$qs.stringify({
          'evQueryData': JSON.stringify({
            'courseId': _this.courseId,
            'userId': _this.user.userId
          })
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            if (data.result != null && data.result.length > 0) {
              _this.isEv = true
            } else {
              _this.isEv = false
            }
          }
        })
    },
    getEvaluations () {
      var _this = this
      this.$axios.post('/api/evaluation/getEvaluation',
        this.$qs.stringify({
          'evQueryData': JSON.stringify({
            'courseId': _this.courseId
          })
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            if (JSON.parse(JSON.stringify(data.result)) != null) {
              _this.evals = data.result
            }
          }
        })
    },
    addEvaluation () {
      var _this = this
      this.evalData.userId = this.user.userId
      this.$axios.post('/api/evaluation/add',
        this.$qs.stringify({
          evaluationData: JSON.stringify(_this.evalData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$message({
            type: 'success',
            message: '评价成功!'
          })
          _this.isEv = true
        }
      })
    }
  }
}
</script>

<style scoped>
  .l {
    float: left;
  }
  .ev-info-div{
    margin-bottom: 20px;
  }
  .ev-info{
    padding: 10px 10px;
    text-align: left;
  }

.ev-info .ev-title{
  color: #1c1f21;
  line-height: 16px;
  font-weight: 700;
  display: inline-block;
}
  .ev-info .ev-score{
    padding-left: 16px;
    font-size: 32px;
    font-weight: 700;
    color: #4d555d;
    line-height: 32px;
    display: inline-block;
  }
  .ev-info .star-box{
    padding-left: 16px;
    display: inline-block;
  }
  .star-box .rateDiv{
    display: inline-block;
    line-height: 32px;
  }
  .right-rate{
    display: inline-block;
    float: right;
    height: 32px;
    line-height: 32px;
  }
  .right-rate ul{
    text-align: right;
    margin: 0px;
  }
  .right-rate ul li {
    padding-left: 28px;
    display: inline-block;
  }
  .right-rate ul li span {
     padding-left: 10px;
     position: relative;
     top: 3px;
     font-size: 24px;
     color: #f90;
     line-height: 24px;
   }
  .message-card {
    background-color: #f3f5f7;
    color: #545c63;
  }
  .ev-submit .ev-title{
    text-align: left;
    height: 32px;
    line-height: 32px;
  }
  .ev-submit .el-divider {
    margin: 10px 0px 20px;
  }
  .ev-submit .ev-title span{
    font-weight: bolder;
  }
  .ev-submit .ev-title .submit-btn{
    display: inline-block;
    float: right;
  }
  .rate-div-all{
    display: inline-block;
    margin-right: 20px
  }
  .rate-div {
    display: inline-block;
  }
  .inputDiv{
    width: 85%;
    height: 100%;
  }
  .el-form--label-top .el-form-item__label{
    padding: 0px;
  }
  .el-form-item{
    height: 100%;
  }
  .el-form-item__content{
    height: 100%;
  }
  .card .left-image{
    width:80px;
    text-align: center;
    float: left;
  }
  .ev .right-content {
    padding-right: 20px;
    min-height: 85px;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    text-align: left;
  }
  .card .name{
    text-align: left;
    margin-bottom: 5px;
    font-weight: bolder;
  }
  .name .name-show{
    display: inline-block;
  }
  .rate-show {
    display: inline-block;
    float: right;
  }
  .bottom-option .creatTime{
    display: inline-block;
    float:right;
  }
  .content-div {
    text-align: left;
    min-height: 60px;
  }
</style>
